<template>
  <div>
    <!-- :dialogVisible="dialogInfo.isShow"
      @changeVi="changeVi" -->
    <div>
      <a-modal
        v-model:visible="visible"
        title="Modal"
        ok-text="确认"
        cancel-text="取消"
        @ok="hideModal"
      >
        <div class="box">
          <div class="box-content">
            <div><span>*</span>项目名称</div>
            <div class="inp-1">
              <input type="text" placeholder="不超过60个字节" />
            </div>
            <div><span>*</span>参数</div>
            <table>
              <tr>
                <th>序号</th>
                <th>分类</th>
                <th>参数</th>
                <th>操作</th>
              </tr>
            </table>
            <div class="box-btn"><button type="button">+添加</button></div>
            <div><span>*</span>项目开始时间</div>
            <div class="inp-2">
              <input type="date" placeholder="请选择开始时间·" />
              <input type="date" placeholder="请选择结束时间" />
            </div>
            <div>
              <span>*</span>项目开始时间
              <div>所属分组</div>
            </div>
            <div class="inp-2">
              <input type="text" placeholder="请选择填写客户名称" />
              <select name="" id="">
                <option value="">-----</option>
              </select>
            </div>
            <div>项目描述</div>
            <div class="box-txt">
              <textarea
                name=""
                id=""
                cols="30"
                rows="10"
                placeholder="给项目写点描述"
              ></textarea>
            </div>
            <div>
              <span>*</span>项目负责人
              <div>项目成员</div>
            </div>
            <div class="jpg-btn">
              <div></div>
              <div></div>
            </div>
            <hr />
          </div>
        </div>
      </a-modal>
    </div>

    <a-layout>
      <!-- 头部 -->
      <a-layout-header>
        <div class="head-logo">
          <span class="head-title">管理系统</span>
          <span class="head-title-right">杨涛</span>
        </div>
        <div class="head-toggle">
          <a-tabs v-model="activeKey" @tabClick="changeTab" centered>
            <a-tab-pane
              :tab="item.name"
              v-for="item in showCom.list"
              :key="item.name"
              :e="item.com"
            >
            </a-tab-pane>
          </a-tabs>
        </div>
      </a-layout-header>
      <div class="qb">
        <span class="content-left">全部项目</span>
        <span class="content-right">
          <a-button type="primary" @click="showModal">+添加项目</a-button>
        </span>
      </div>
      <a-layout>
        <!-- 内容 -->
        <a-layout-content>
          <component :is="showCom.com"></component>
        </a-layout-content>
        <a-layout-sider>
          <!-- 导航菜单 -->

          <div
            style="height: 89vh; background: #fff; width: 200px"
            ref="testRef"
            collapse
          >
            <a-button
              type="primary"
              style="margin-bottom: 16px"
              @click="toggleCollapsed"
            >
              <MenuUnfoldOutlined v-if="collapsed" />
              <MenuFoldOutlined v-else />
            </a-button>
            <a-menu
              mode="inline"
              theme="light"
              :inline-collapsed="collapsed"
              v-if="collapsed"
            >
              <a-sub-menu key="sub1">
                <template #icon> 项目管理 </template>

                <a-menu-item key="5">全部项目</a-menu-item>
                <a-menu-item key="6">星选项目</a-menu-item>
                <a-menu-item key="7" dashed>Option 7</a-menu-item>
                <a-menu-item key="8">Option 8</a-menu-item>
                <a-menu-item key="9">Option 9</a-menu-item>
                <a-menu-item key="10">Option 10</a-menu-item>
              </a-sub-menu>
            </a-menu>
          </div>
        </a-layout-sider>
      </a-layout>
    </a-layout>
  </div>
</template>

<script lang="ts">
import "../css/Dialog.less";
import formbal from "./submenu/formbal.vue";
import weather from "./submenu/weather.vue";
import scene from "./submenu/scene.vue";
import disaster from "./submenu/disaster.vue";
import utilize from "./submenu/utilize.vue";

import {
  defineComponent,
  reactive,
  toRefs,
  watch,
  ref,
  getCurrentInstance,
  onMounted,
  createVNode,
} from "vue";
import { Modal } from "ant-design-vue";

import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  PieChartOutlined,
  MailOutlined,
  DesktopOutlined,
  InboxOutlined,
  AppstoreOutlined,
  UserOutlined,
  InfoCircleOutlined,
} from "@ant-design/icons-vue";

export default defineComponent({
  components: {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    PieChartOutlined,
    MailOutlined,
    DesktopOutlined,
    InboxOutlined,
    AppstoreOutlined,
    UserOutlined,
    InfoCircleOutlined,
    formbal,
    weather,
    scene,
    disaster,
    utilize,
  },

  setup() {
    const userName = ref<string>("");
    const state = reactive({
      collapsed: false,
      selectedKeys: ["1"],
      openKeys: ["sub1"],
      preOpenKeys: ["sub1"],
    });

    let showCom = reactive({
      com: formbal,
      list: [
        // markRaw [ma k rou]
        { name: "气候检测", com: utilize },
        { name: "气象预测", com: weather },
        { name: "气象灾害风险预测", com: scene },
        { name: "气候资源开发利用", com: disaster },
        { name: "气候可行性论证", com: formbal },
      ],
    });
    //tab切换
    function changeTab(val) {
      // showCom.com = val;
      let num = showCom.list.findIndex((item) => {
        // console.log(item.name);
        return item.name == val;
      });
      // console.log(val, a, num);
      showCom.com = showCom.list[num].com;
    }
    // 导航
    watch(
      () => state.openKeys,
      (_val, oldVal) => {
        state.preOpenKeys = oldVal;
      }
    );
    const toggleCollapsed = () => {
      state.collapsed = !state.collapsed;
      state.openKeys = state.collapsed ? [] : state.preOpenKeys;
    };
    // 添加项目
    // const DiaAll = ref();
    let dialog = reactive({
      d: false,
    });
    const add = () => {
      // console.log(dialog.d);
      dialog.d = true;
    };
    // dialogInfo 来控制显示隐藏
    // const dialogInfo = reactive({
    //   isShow: false,
    // });

    // //  监听显示隐藏状态改变
    watch(
      () => dialog.d,
      (val) => {
        console.log("父组件监听flag:", val);
      }
    );

    //  接收子组件传过来的事件
    const changeVi = (val: any) => {
      dialog.d = false;
    };
    const visible = ref<boolean>(false);

    const showModal = () => {
      visible.value = true;
    };
    const hideModal = () => {
      visible.value = false;
    };

    const confirm = () => {
      Modal.confirm({
        title: "Confirm",
        icon: createVNode(ExclamationCircleOutlined),
        content: "Bla bla ...",
        okText: "确认",
        cancelText: "取消",
      });
    };

    return {
      ...toRefs(state),
      toggleCollapsed,
      activeKey: ref("1"),
      showCom,
      userName,
      changeTab,
      dialog,
      add,
      changeVi,
      visible,
      showModal,
      hideModal,
      confirm,

      //   tableHeight: document.documentElement.clientHeight - 260 + "px",
    };
  },
});
</script>

//
<style lang="less" scoped>
// @import url("../../css/Dialog.less");
//
</style>
<style>
/* 头部 */
.head-logo {
  width: 100%;
  height: 60%;
  background-color: skyblue;
  position: relative;
}
.head-title {
  position: absolute;
  left: 20px;
  line-height: 60px;
}
.head-title-right {
  position: absolute;
  right: 20px;
  line-height: 60px;
}
.head-toggle {
  position: relative;
  bottom: 7px;
}

/* 内容-中 */
.content-right {
  float: right;
}
.ant-card-body {
  position: relative;
  top: 10px;
}
/* table */
/* .ant-table-wrapper,
.ant-spin-nested-loading,
.ant-spin-container,
.ant-table,
.ant-table-container {
  height: 100%;
} */
#components-layout-demo-basic .code-box-demo {
  text-align: center;
}
.ant-layout-sider-children {
  background: #eee;
}
#components-layout-demo-basic .ant-layout-header,
#components-layout-demo-basic .ant-layout-footer {
  color: #fff;
}
.ant-layout-header {
  height: 100px;
  padding: 0px;
  background: #fff;
}
.ant-input-affix-wrapper {
  width: 250px;
}
/* .components-input-demo-presuffix {
  padding: 10px;
} */

[data-theme="dark"] #components-layout-demo-basic .ant-layout-footer {
  background: #6aa0c7;
}
#components-layout-demo-basic .ant-layout-footer {
  line-height: 1.5;
}
#components-layout-demo-basic .ant-layout-sider {
  color: #fff;
  line-height: 120px;
  background: #3ba0e9;
}
[data-theme="dark"] #components-layout-demo-basic .ant-layout-sider {
  background: #3499ec;
}
#components-layout-demo-basic .ant-layout-content {
  min-height: 120px;
  color: #fff;
  line-height: 120px;
  background: rgba(16, 142, 233, 1);
}
[data-theme="dark"] #components-layout-demo-basic .ant-layout-content {
  background: #107bcb;
}
#components-layout-demo-basic > .code-box-demo > .ant-layout + .ant-layout {
  margin-top: 48px;
}
.search {
  display: flex;
  padding: 10px;
}
.search > div {
  margin-left: 20px;
}
.ant-table-wrapper {
  padding: 20px;
  padding-top: 0;
}
.ant-card-body {
  margin: 10px;
  padding: 10px;
  background-color: #eee;
}
.qb {
  width: 90%;
  height: 60px;
  background-color: #fff;
  margin-top: 10px;
  line-height: 60px;
  padding-left: 20px;
  padding-right: 20px;
  margin-bottom: 10px;
}
</style>
